<!DOCTYPE html>
<html lang="en">
    <head>
        <title>稀土掘金</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link rel="icon" href=".\images\juejin.svg" sizes="192x192">
    </head>
    <body>
        <div class="container">
            <div class="container-head">
                <div class="container-head-left">
                    <img src=".\images\稀土掘金.svg" alt="稀土掘金">
                </div>
                <div class="container-head-middle">
                    <div class="middleNav">首页</div>
                    <div class="middleNav">AI Coding</div>
                    <div class="middleNav">沸点</div>
                    <div class="middleNav">课程</div>
                    <div class="middleNav">直播</div>
                    <div class="middleNav">活动</div>
                    <div class="middleNav">AI刷题</div>
                    <div>APP</div>
                    <div>插件</div>
                </div>
                <div class="container-head-right">
                    <div class="search">
                        <input type="text">
                        <img  class="search-img" src=".\images\搜索.svg" alt="搜索">
                    </div>
                    <div class="creative">
                        <div class="creative-box">
                            <div class="creative-text">创作中心</div>
                            <img class="creative-img" src=".\images\向下1.svg">
                        </div>
                        
                    </div>
                    <div class="registrationAndLogin">
                        <div class="registrationAndLoginPart01">
                            <img class="vipImg" src=".\images\会员.svg" alt="">
                            <div>会员</div>
                        </div>
                        <div class="registrationAndLoginPart02">注册
                            <div >
                                <div class="line"></div>
                                登录
                            </div>
                         </div>
                    </div>
                </div>
            </div>
        
        <div class="containerMain">
            <div class="containerMainLeft">
                <a class="containerMainLeft01" href="#">
                    <img src=".\images\关注列表.svg" alt="关注">
                    <span>关注</span>
                </a>
                <a class="containerMainLeft02" href="#">
                    <img src=".\images\指南针.svg" alt="综合">
                    <span>综合</span>
                </a>
                <a class="containerMainLeft03" href="#">
                    <img src=".\images\前后端切换.svg" alt="后端">
                    <span>后端</span>
                </a>
                <a  class="containerMainLeft04"href="#">
                    <img src=".\images\前端.svg" alt="前端">
                    <span>前端</span>
                </a>
                <a class="containerMainLeft05" href="#">
                    <img src=".\images\android.svg" alt="Android">
                    <span>Android</span>
                </a>
                <a class="containerMainLeft06" href="#">
                    <img src=".\images\ios.svg" alt="iOS">
                    <span>iOS</span>
                </a>
                <a class="containerMainLeft07" href="#">
                    <img src=".\images\robot-2-line.svg" alt="人工智能">
                    <span>人工智能</span>
                </a>
                <a class="containerMainLeft08" href="#">
                    <img src=".\images\开发工具.svg" alt="开发工具">
                    <span>开发工具</span>
                </a>
                <a class="containerMainLeft09" href="#">
                    <img src=".\images\script代码.svg" alt="代码人生">
                    <span>代码人生</span>
                </a>
                <a class="containerMainLeft10" href="#">
                    <img src=".\images\阅读.svg" alt="阅读">
                    <span>阅读</span>
                </a>
                <a class="containerMainLeft11" href="#">
                    <img src=".\images\排行榜.svg" alt="排行榜">
                    <span>排行榜</span>
                </a>
           
            </div>
            <div class="containerMainMiddle">
                <div class="twoNav">
                    <a class="reommend">推荐</a>
                    <a class="mostHot">最新</a>
                    <div class="line"></div>
                </div>
                <div class="textBody"></div>
            </div>
            <div class="containerMainRight">
                <div class="containerMainRight01"></div>
                <div class="containerMainRight02"></div>
                <div class="containerMainRight03">
                    <div class="imgBox">
                        <img class="imgLeftGo icon" src=".\images\按钮_箭头向左_o.svg" alt="">
                        <ul class="dotBox">
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <img class="imgRightGo icon" src=".\images\按钮-箭头向右_o.svg" alt="">
                    </div>
                </div>
                <div class="containerMainRight04"></div>
                <div class="containerMainRight05"></div>
                <div class="containerMainRight06"></div>
            </div>
        </div>

        
     </div>

     <script src="index.js">  </script>



    </body>
</html>